<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card>
<!--          <searchBox title='培训记录' :btn='btn' @func='showBtn'/>-->
          <el-row class="searchbox">
            <el-col span="1"> 培训记录 </el-col>
            <el-col span="3">
              <el-input
                placeholder="培训编号"
                v-model="queryParams.trainingNo"
              >
              </el-input>
            </el-col>
            <el-col span="3">
              <el-input
                placeholder="培训名称"
                v-model="queryParams.trainingName"
              >
              </el-input>
            </el-col>
            <el-col span="1">
              <el-button @click="handleLoadAndQuery" type="primary">查询</el-button>
            </el-col>
            <el-col span="2">
              <el-button @click="handleOpenAdd" type="primary">新增</el-button>
            </el-col>
            <el-col span="2">
              <el-button type="primary">导出</el-button>
            </el-col>
          </el-row>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column label="培训编号" align="left" prop="trainingNo" :show-overflow-tooltip="true"/>
              <el-table-column label="培训名称" align="left" prop="trainingName" :show-overflow-tooltip="true"/>
              <el-table-column label="培训方式" align="left" prop="type"/>
              <el-table-column label="培训开始时间" align="left" prop="startTime" :show-overflow-tooltip="true"/>
              <el-table-column label="培训结束时间" align="left" prop="endTime" :show-overflow-tooltip="true"/>
              <el-table-column label="培训人数" align="left" prop="student"/>
              <el-table-column label="培训讲师" align="left" prop="lecturer"/>
              <el-table-column label="所属项目" align="left" prop="projectName"/>
              <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleOpenEdit(scope.row)"
                  >编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click.native.stop="handleOpenDetail(scope.row)"
                  >总结
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click.native.stop="handleDelete(scope.row)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <pagination v-show="total>0" :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="handleLoadAndQuery"/>

        </el-card>
      </el-row>
    </div>
    <el-drawer
      :title="title"
      :visible.sync="isVisibleAdd"
      size='65%'
    >
      <addTraining @close='handleCloseAdd'
                   :disabled="disabled"
                   ref="AddRef"/>
    </el-drawer>
  </div>
</template>

<script>

import addTraining from "../components/addTraining"
// import trainingDetail from "../components/trainingDetail"
import {listPage, delTrainingRecords} from "@/api/business/trainingRecords"

export default {
  name: "trainingRecord",
  components: {
    addTraining
  },
  data() {
    return {
      btn: {
        add: true,
        reg: false,
        down: false,
        export: true,
        imp: false,
        search: true
      },
      checkList: [],
      addShow: false,
      detailShow: false,
      loading: false,
      redirect: undefined,
      activeName: '1',
      value: '',
      total: 5,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        trainingNo: '',
        trainingName: ''
      },
      isVisibleAdd: false,
      title: '新增',
      disabled: false
    };
  },
  watch: {},
  created() {
    this.handleLoadAndQuery()
  },
  methods: {
    showBtn(data) {
      if (data == 'add') {
        this.handleOpenAdd()
      }if (data === 'search') {
        this.handleLoadAndQuery()
      }
    },
    handleOpenAdd() {
      this.isVisibleAdd = true
      this.disabled = false
      this.title = '新增'
    },
    handleCloseAdd() {
      this.isVisibleAdd = false
      this.disabled = false
      this.title = '新增'
      this.handleLoadAndQuery()
    },
    handleDelete(row) {
      delTrainingRecords(row.id).then((res) => {
        this.handleLoadAndQuery()
      })
    },
    handleOpenEdit(row) {
      this.title = '编辑'
      this.disabled = false
      this.isVisibleAdd = true
      this.$nextTick(() => {
        this.$refs.AddRef.handleData(row)
      })
    },
    handleOpenDetail(row) {
      this.title = '详情'
      this.disabled = true
      this.isVisibleAdd = true
      this.$nextTick(() => {
        this.$refs.AddRef.handleData(row)
      })
    },
    handleLoadAndQuery() {
      this.checkList = []
      this.loading = true;
      listPage(this.queryParams).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.checkList = res.records;
      })
        .catch(() => {
          this.loading = false;
        })
    }
  }
};
</script>
